<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三种创建对象的方法</title>
</head>

<body>
    <script>
        // 1，利用对象字面量创建对象 {}
        var obj = {
                username: '小可爱',
                age: 18,
                sex: '男',
                Run: function() {
                    console.log('跑起来了');
                }
            }
            // (1) 采用键值对的形式 键 属性名: 值 属性值
            // (2) 多个属性或方法中间用逗号隔开
            // (3) 方法冒号后面跟的是匿名函数

        // 对象的使用-- 属性的调用
        // (1) 调用对象的属性 对象名.属性名
        console.log(obj.username);
        // (2) 调用属性的另一种方法 对象名['属性名']
        console.log(obj['age']);
        // 调用对象的方法 Run  对象名.方法名()  *别忘了调用要加小括号的
        obj.Run();


        var DogKeKe = {
            name: '可可',
            age: 5,
            type: '阿拉斯加犬',
            color: 'brownish red',
            cn_color: function() {
                console.log('棕红色的哟~');
            },
            skill: ['看电影', '演戏']
        }
        console.log(DogKeKe.name);
        console.log(DogKeKe['age']);
        // console.log(DogKeKe);




        // 2. 利用 new Object 创建对象
        var obj2 = new Object();
        obj2.uname = '李白';
        obj2.age = 20;
        obj2.sex = '男';
        obj2.SayHi = function() {
            console.log('hello~');
        }

        // (1) 利用等号 = 赋值的方法添加对象的属性和方法
        // (2) 每个属性和方法之间分号隔开 ;
        console.log(obj2.uname);
        console.log(obj2['age']);
        obj2.SayHi();


        var Naruto = new Object();
        Naruto.name = '漩涡鸣人';
        Naruto.age = 19;
        Naruto.sex = '男';
        Naruto.skill = ['影分身', '螺旋丸'];




        // 3.利用构造函数创建对象
        // 为什么需要构造函数？ 因为前两种创建对象的方式一次只能创建一个对象
        // 利用函数的方法，重复一些相同的代码，我们就称这个函数为 构造函数  --- 即封装的是对象
        // 构造函数就是把对象里面的一些相同的属性和方法抽象出来封装到函数里面

        var LDH = {
            uname: '刘德华',
            age: '55',
            song: function() {
                console.log(['冰雨', '忘情水']);
            }
        }

        var ZXY = {
            uname: '张学友',
            age: '58',
            song: function() {
                console.log('李香兰');
            }
        }

        // 上示代码发现有很多重复，如果多了一个一个复制很麻烦
        // 利用构造函数创建四大天王的对象  --相同的属性：姓名，年龄，性别 相同的方法：唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, uage, usex) {
            // 相同属性
            this.name = uname;
            this.age = uage;
            this.sex = usex;
            // 相同方法
            this.sing = function(usong) {
                console.log(usong);
            }
        }
        // new Star('刘德华', 55, '男');
        var ldh = new Star('刘德华', 55, '男');
        console.log(ldh.name); // 刘德华
        // 构造函数方法调用  -- song('冰雨') 是函数传了冰雨进去
        ldh.sing('冰雨');

        var zxy = new Star('张学友', 58, '男');
        console.log(zxy.name); // 张学友
        // 1、构造函数名首字母要大写
        // 2、构造函数不需要return 就可以返回结果
        // 3、调用构造函数 必须使用 new
        // 4、只要 new Star() 调用函数就创建一个对象 ldh{} ,使用构造函数就不用在复制代码了
        // 5、属性和方法前面必须添加 this
    </script>
</body>

</html>